<template>
    <view>
    
        <view class="home_tab">

            <!-- 顶部导航栏标题，包括搜索图标 -->
            <view class="home_tab_title">
                <view class="title_inner">
                    <uni-segmented-control :current="current" :values="items.map(v=>v.title)" @clickItem="onClickItem" style-type="text" active-color="#ff6700"></uni-segmented-control>
                </view>
                <view class="iconfont iconsearch"></view>
            </view>

            <!-- 内容 -->
            <view class="home_tab_content">
                <view class='' v-if="current<4">
                    <video-main :urlobj="{url:items[current].url,params:items[current].params}"></video-main>
                </view>
                <view v-if="current===4">
                    <video-category ></video-category>
                </view>
            </view>

        </view>

    
    </view>
</template>
    
<script>
    
import {uniSegmentedControl} from "@dcloudio/uni-ui"
import videoMain from "./video_main/video_mian"
import videoCategory from "./video_category/video_category"

export default {
    data() {
        return {
            items: [
                {title:"推荐",url:"http://157.122.54.189:9088/videoimg/v1/videowp/featured",params:{ limit:30,skip:0,order:'hot'}  },
                {title:"娱乐",url:"http://157.122.54.189:9088/videoimg/v1/videowp/category/59b25abbe7bce76bc834198a",params:{ limit:30,skip:0,order:'new'}  },
                {title:"最新",url:"http://157.122.54.189:9088/videoimg/v1/videowp/videowp",params:{ limit:30,skip:0,order:'new'}  },
                {title:"热门",url:"http://157.122.54.189:9088/videoimg/v1/videowp/videowp",params:{ limit:30,skip:0,order:'hot'}  },
                {title:"分类",url:"http://157.122.54.189:9088/videoimg/v1/videowp/category",params:{  }  }
            ],
            current: 0//当前tab栏的索引
        };
    },

    methods: {
        onClickItem(e) {
            if (this.current !== e.currentIndex) {
                this.current = e.currentIndex;
            }
        }
        
    },

    components:{
        uniSegmentedControl,videoMain,videoCategory
    }


    }
</script>
    
    
<style scoped lang="scss">

    .home_tab{
    

    .home_tab_title{
        position: relative;

        .title_inner{
            width: 60%;
            margin: 0 auto;
        }
        .iconsearch{
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            right:5%;
        }
        
    }


}

</style>